<template>
  <div class="KindSub.vue">
    <div class="content">
      <div class="content-bar">
        <ul class="content-lists">
            <router-link
              tag="li"
              :to="{name:'goodsDetail',params:{id:bannerkind.id}}"
              class="content-item"
              @click.native="myLists(bannerkind.id)"
              v-for="bannerkind in bannerkinds"
              :key="bannerkind.id"
            >
            
              <img :src="bannerkind.img" alt class="content-img">
              <p class="cont-ename cont-name">{{bannerkind.name}}</p>
              <p class="cont-cname cont-name">{{bannerkind.cname}}</p>
              <p class="cont-money">
                <span class="mai"> ¥{{bannerkind.monay}}</span>
              </p>
            </router-link>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "KindSub.vue",
  props: {
    bannerkinds: Array
  },
  data() {
    return {
      ident: true
    };
  },

  methods: {
    myLists(id){
      console.log("aaa",id)
      // return this.$store.getters["goodsDetail/myList"]
      this.$store.commit("goodsDetaul/myID",id);
    },
    upgo() {
      if (this.ident) {
        this.ident = !this.ident;
        this.bannerkinds.sort((a, b) => a.number - b.number).reverse(); //结合reverse(),
      } else {
        this.ident = !this.ident;
        this.bannerkinds.sort((a, b) => a.number - b.number);
      }
    }
  },
  computed: {
    // kind(){
    //   // return this.bannerkinds.sort((a, b) => a.number - b.number).reverse()//结合reverse(),
    //   return this.bannerkinds;
    // }
  }
};
</script>

<style lang='scss' scoped>
.v-enter,
.v-leave-to {
  // opacity: 0;
  transform: translateX(0);
  // transition: all 1s ease;

}

.v-enter-active,
.v-leave-active {
  transition: all 1s ease;
}
.content {
  .content-lists {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 9.5px;
    .content-item {
      width: 129px;
      .cont-name {
        font-size: 14px;
        color: #494949;
        line-height: 17px;
      }
      .cont-money {
        color: #010e0d;
        font-size: 12px;
        line-height: 17px;
      }
      .content-img {
        width: 129px;

        height: 129px;
        background-color: pink;
      }
    }
  }
}
</style>
